<template>
	<el-dialog :close-on-click-modal="false" :close-on-press-escape="false" title="权限" :model-value="visible" width="650px"
		@close="onCancel">
		<template #footer>
			<el-button key="back" @click="() => onCancel()">取消</el-button>
			<el-button key="submit" type="primary" :loading="onSubmitLoading" @click="getCheckedNodes">提交</el-button>
		</template>
		<el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border>
			<el-table-column prop="name" label="模块名称" sortable />
			<!-- <el-table-column prop="icon" label="图标" sortable /> -->
			<el-table-column prop="path" label="路径" sortable />
			<el-table-column prop="title" label="标题" sortable width="120" />
			<el-table-column label="权限" width="50">
				<template #default="{row}">
					<el-checkbox v-model="row.selected"></el-checkbox>

				</template>
			</el-table-column>
			<el-table-column label="按钮" width="50">
				<template #default="{row}">
					<el-tooltip content="设置按钮权限">
						<el-button type="success" icon="Setting" size="small" @click="ButtonSetting(row)" />
					</el-tooltip>
				</template>
			</el-table-column>

		</el-table>

		<pagebutton-form :visible="pageButtonFormVisible" :onCancel="() => pageButtonFormVisible=false"
			:onSubmit="setPageButonSubmit" :data="roleBtns" :roleId="props.roleId" />
	</el-dialog>


</template>

<script setup lang="ts">
	import Icon from '@/components/IconSvg';
	import PagebuttonForm from './PagebuttonForm.vue'
	import {
		PageButtonItem,
		TableListItem,
		RoleModuleItem
	} from "../data.d";
	import {
		computed,
		ComputedRef,
		defineComponent,
		PropType,
		reactive,
		ref,
		Ref,
		onMounted,
		defineProps
	} from "vue";
	import {
		ElForm,
		ElMessage,
		ElTree
	} from "element-plus";
	import {
		queryRoleData,
		updataRoleData,

	} from '../service'
	import { getUserRouter } from '@/services/user'

	const props = defineProps({
		roleId: {
			type: Number,
			required: true
		},
		visible: {
			type: Boolean,
			required: true
		},
		onCancel: {
			type: Function,
			required: true
		}

	})
	const tableData = ref([])
	const pageButtonFormVisible = ref(false)
	const roleBtns = ref('')
	const ButtonSetting = (row : any) => {
		if (row.btns&&row.btns!="[]") {
			roleBtns.value = row
			pageButtonFormVisible.value = true
		}else{
			ElMessage("该页面没有按钮权限")
		}
	}
	const setPageButonSubmit = () => {
		pageButtonFormVisible.value = false
	}

	const curentId = ref(0)

	const getCheckedNodes = () => {
		let permission : Array<object> = []
		getCheckBoxPermission(tableData.value, permission)

		updataRoleData({
			RoleId: props.roleId,
			modules: permission,
		}
		).then(data => {
			console.log(data)
			props.onCancel()
		});
	}


	const loading = ref<boolean>(true);
	const getList = async () : Promise<void> => {
		loading.value = true;
		tableData.value = await getUserRouter()
		const roleData = await queryRoleData(props.roleId)
		let permission : Array<number> = []
		getRolePermission(roleData, permission)
		checkPermission(tableData.value, permission)
		loading.value = false;
	}

	const getRolePermission = (modules : any, permissions : Array<Number>) => {
		modules.forEach((module : any) => {
			permissions.push(module.id)
			if (module.children) {
				getRolePermission(module.children, permissions)
			}
		})
	}
	const checkPermission = (modules : any, permissions : Array<Number>) => {
		modules.forEach((module : any) => {
			if (permissions.includes(module.id)) {
				module.selected = true
			} else {
				module.selected = false
			}
			if (module.children) {
				checkPermission(module.children, permissions)
			}
		})
	}
	const getCheckBoxPermission = (modules : any, permissions : Array<object>) => {
		modules.forEach((module : any) => {
			if (module.selected) {
				permissions.push({
					moduleId: module.id,
					btns: module.btns
				})
				if (module.children) {
					getCheckBoxPermission(module.children, permissions)
				}
			}
		})
	}

	onMounted(() => {
		getList();
	})
</script>

<style>
</style>